<script setup lang="ts">
  import { ref, onBeforeMount, watch } from 'vue';
  import {
    queryDeviceRunningList,
  } from '@/api/device-management/running';
  import InnerPage from '@/components/inner-page/index.vue';
  import DeviceInfo from './info.vue';

  const loading = ref(false);
  const baseNameMap = {
    itemId: { key: 'deviceId', label: '' },
    itemEventName: {
      key: 'eventName',
      label: '事件名称',
      placeholder: '请输入报警事件名称',
    },
    itemStatus: {
      key: 'status',
      label: '工单状态',
      placeholder: '请选择工单状态',
    },
    btnAction: { label: '操作' },
    btnLook: { label: '查看' },
  };
  // 没用到分页
  const dataPage = ref({
    page: 1,
    pageSize: 9999999,
    total: 0,
  });

  const currentMenuId = ref('');
  // 左侧菜单 (需要 unread 接口)
  const leftMenu = ref([
    { unread: 1, name: '紧急求救类', id: 'G011', active: false },
    { unread: 0, name: '环境监测类', id: 'G012', active: false },
    { unread: 0, name: '跌到监测类', id: 'G013', active: false },
    { unread: 0, name: '体征监测类', id: 'G014', active: false },
  ]);

  const devices = ref<any[]>([]);

  const onClickLeftMenu = (id: string) => {
    leftMenu.value.map((item) => {
      if (item.id === id) {
        item.active = true;
        currentMenuId.value = id;
      } else {
        item.active = false;
      }
      return item;
    });
  };

  const infoHandler = ref({
    props: {
      [baseNameMap.itemId.key]: '',
    },
    onBack: () => {
      infoHandler.value.props[baseNameMap.itemId.key] = '';
    },
    onUpdate: () => {
      // pageTable.reload();
    },
  });

  onBeforeMount(() => {
    onClickLeftMenu(leftMenu.value[0].id);
  });

  watch(
    () => currentMenuId.value,
    (newVal) => {
      if (newVal) {
        loading.value = true;
        queryDeviceRunningList({
          page: dataPage.value.page,
          pageSize: dataPage.value.pageSize,
          groupCode: newVal,
        }).then((res)=>{
          dataPage.value.total = res.total;
          devices.value = res.list;
        }).catch((err)=>{}).finally(()=>{
          loading.value = false;
        });
      }
    }
  );
</script>

<template>
  <div class="m-running">
    <div class="m-running-raw flex" style="column-gap: 20px">
      <ul class="m-rr-menu">
        <li
          v-for="(item, index) of leftMenu"
          :key="'lm-' + index"
          :class="{ selected: item.active }"
          @click="onClickLeftMenu(item.id)"
        >
          <a-badge dot :count="item.unread">
            <span class="txt">{{ item.name }}</span>
          </a-badge>
        </li>
      </ul>
      <div class="m-rr-body flex-1 my-scrollbar">
        <!-- <div v-for="(station, index) in devices" :key="'mrrb-' + index"> -->
          <!-- <div>
            <span
              :style="{
                fontSize: '15px',
                fontWeight: '600',
                color: 'var(--color-primary-light-4)',
              }"
              >{{ station.station }}</span
            >
          </div> -->
          <a-card
            v-if="devices.length > 0"
            class="m-rrb-station"
            style="margin: 10px 0"
            :bordered="false"
          >
            <a-card-grid
              v-for="(item, index) in devices"
              :key="'mrrbs-' + index"
              :hoverable="true"
              style="user-select: none; width: 23%"
            >
              <a-card>
                <div class="flex-vcenter" style="font-size: 15px">
                  <span style="font-weight: 600">{{ item.deviceName }}</span>
                  <span class="flex-1"></span>
                  <span
                    v-if="item.runnigStatus === 1"
                    style="color: rgb(var(--green-6))"
                    >{{ item.runningStatusName }}</span
                  >
                  <span v-else style="color: rgb(var(--red-6))">{{ item.runningStatusName }}</span>
                </div>
                <div style="margin-top: 8px; row-gap: 4px" class="flex-col">
                  <div>
                    <span class="label">设备型号</span
                    ><span class="value">{{ item.modelCode }}</span>
                  </div>
                  <div>
                    <span class="label">设备编码</span
                    ><span class="value">{{ item.deviceCode }}</span>
                  </div>
                  <div>
                    <div style="text-align: right">
                      <a-button
                        type="primary"
                        size="small"
                        @click="
                          infoHandler.props[baseNameMap.itemId.key] =
                            item.deviceId
                        "
                        >查看</a-button
                      >
                    </div>
                  </div>
                </div>
              </a-card>
            </a-card-grid>
          </a-card>
          <div v-else>
            <a-empty description="暂无设备信息" />
          </div>
        <!-- </div> -->
      </div>
    </div>
    <Transition name="slide-right">
      <InnerPage
        v-if="infoHandler.props[baseNameMap.itemId.key]"
        class="m-alarm-details"
        @back="infoHandler.onBack"
      >
        <!-- 工单详情 -->
        <DeviceInfo v-bind="infoHandler.props" />
      </InnerPage>
    </Transition>
  </div>
</template>

<style lang="less" scoped>
  .m-running {
    height: 100%;
  }

  .m-running-raw {
    height: 100%;
  }

  .m-rr-menu {
    & > li {
      padding: 5px 5px;
      border: 1px solid var(--color-neutral-3);
      cursor: pointer;
      margin-bottom: 8px;
      color: var(--color-text-1);

      &:hover {
        background-color: rgb(var(--arcoblue-1));
      }

      & span.txt {
        display: inline-block;
        padding: 7px 20px;
        font-weight: 600;
      }
    }

    & > li.selected {
      color: rgb(var(--primary-6));
      border: 1px solid rgb(var(--arcoblue-4));
      background-color: rgb(var(--arcoblue-1));
    }
  }

  .m-rr-body {
    // max-height: 90%;
    overflow-x: hidden;
    overflow-y: auto;

    .m-rrb-station {
      .label {
        color: var(--color-text-1);
        margin-right: 10px;
      }

      .value {
        color: var(--color-text-2);
      }
    }
  }

  .m-rr-body :deep(.arco-card-body) {
    padding: 0 4px;
    // justify-content: space-between;
    column-gap: 2.66%;
    row-gap: 12px;
  }

  .m-rr-body :deep(.arco-card-grid) {
    border-radius: 4px;
  }

  .m-rr-body :deep(.arco-card-grid .arco-card-body) {
    padding: 10px 12px;
  }

  .m-rr-body :deep(.arco-card-header) {
    border: none;
  }
</style>
